/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/
@use '../../internal/styles/tokens' as awsui;
@use '../../internal/styles' as styles;
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;

$item-toggle-column-width: 28px;

.treeitem-group {
  @include styles.styles-reset-ul;

  position: relative;
}

.treeitem {
  @include styles.styles-reset-ul;

  position: relative;

  &.offset {
    margin-inline-start: awsui.$space-tree-view-indentation;
  }

  > .treeitem-content-wrapper {
    display: grid;
    grid-template-columns: $item-toggle-column-width 1fr;
    align-items: baseline;

    // When toggle is focused, show focus outline around the entire tree item
    // stylelint-disable-next-line selector-combinator-disallowed-list
    body[data-awsui-focus-visible='true'] &:has(.tree-item-focus-target:focus) {
      @include styles.focus-highlight(0px);
    }

    > .expand-toggle-wrapper {
      display: grid;
      grid-column: 1;
      grid-row: 1;

      > .toggle {
        justify-self: center;
        position: relative;
        inset-block-start: 2px;
      }
    }

    > .structured-item-wrapper {
      grid-column: 2;
      grid-row: 1 / span 2;
      padding-block: awsui.$space-scaled-xxxs;

      position: relative;
    }
  }
}

.tree-item-structured-item {
  /* used in keyboard navigation */
}

.tree-item-focus-target {
  outline: none;
}
